<template>
  <div class="b-fast-menu flex justify-between items-center">
    <span class="b-fast-menu--text truncate">{{$t('custom.quickFilter')}}</span>
    <el-tooltip :open-delay="1000"
                :content="$t('custom.scfsa')"
                placement="left"
                popper-class="b-fast-menu-tooltip"
                v-model="currentValue">
      <img src="@/assets/img/save.png"
           class="cursor-pointer"
           @click="openModal">
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'BFastMenu',
  props: {
    value: Boolean
  },
  computed: {
    currentValue: {
      set (val) {
        this.$emit('input', !!val)
      },
      get () {
        return !!this.value
      }
    }
  },
  methods: {
    openModal () {
      this.$emit('event:open-modal')
    }
  }

}
</script>
<style lang="scss">
.b-fast-menu {
  white-space: nowrap;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0px 1px 0px 0px #f0f0f0;

  &--text {
    font-size: 14px;
    color: #404040;
    line-height: 14px;
    font-weight: 600;
  }
}

.b-fast-menu-tooltip {
  max-width: 138px !important;
}
</style>
